<template>
  <div class="app-container-custom">
    <!-- 添加或修改常规费用单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8" :xs="24">
                <el-form-item label="房屋" prop="roomId">
                  <el-input v-model="form.roomName" class="input-with-select" readonly>
                    <el-button slot="append" icon="el-icon-search" @click="() => this.$refs.roomRef.show()"></el-button>
                  </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-form-item label="客户" prop="ownerId">
                  <el-select v-model="form.ownerId">
                    <el-option v-for="item in ownerOptions"
                               :key="item.customId"
                               :label="item.customName"
                               :value="item.customId"
                    />
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-form-item label="收费类型" prop="projectId">
                  <el-select v-model="form.projectId" placeholder="请选择收费类型">
                    <el-option v-for="item in projectOptions"
                               :key="item.projectId"
                               :label="item.projectType"
                               :value="item.projectId"
                    />
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-form-item label="收费项目" prop="chargeId" placeholder="请选择收费项目">
                  <el-select v-model="form.chargeId">
                    <el-option v-for="item in itemOptions"
                               :key="item.chargeId"
                               :label="item.chargeName"
                               :value="item.chargeId"
                    />
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-form-item label="应收日期" prop="receivableTime">
                  <el-date-picker clearable size="small"
                    v-model="form.receivableTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择应收日期">
                  </el-date-picker>
                </el-form-item>
            </el-col>
            <!--<el-col :span="8" :xs="24">-->
                <!--<el-form-item label="计费开始日期" prop="beginTime">-->
                  <!--<el-date-picker clearable size="small"-->
                    <!--v-model="form.beginTime"-->
                    <!--type="date"-->
                    <!--value-format="yyyy-MM-dd"-->
                    <!--placeholder="选择计费开始日期">-->
                  <!--</el-date-picker>-->
                <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="8" :xs="24">-->
                <!--<el-form-item label="计费结束日期" prop="finishTime">-->
                  <!--<el-date-picker clearable size="small"-->
                    <!--v-model="form.finishTime"-->
                    <!--type="date"-->
                    <!--value-format="yyyy-MM-dd"-->
                    <!--placeholder="选择计费结束日期">-->
                  <!--</el-date-picker>-->
                <!--</el-form-item>-->
            <!--</el-col>-->
            <el-col :span="8" :xs="24">
                <el-form-item label="金额" prop="moneys">
                  <el-input-number v-model="form.moneys" :precision="2" :step="10" :min="0" style="width: 100%"></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="17" :xs="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <TableSelect
      ref="roomRef"
      :listColumns="roomColumns"
      gridUrl="/property/room/list"
      @rowClick="roomSelect"
      dialogWidth="780px"
      title="房屋字典"
    />
  </div>
</template>

<script>
import { listRuleCost, getRuleCost, delRuleCost, addRuleCost, updateRuleCost, exportRuleCost,createRuleCost } from "@/api/payfee/ruleCost";
import { listItem } from "@/api/payfee/item";
import { listProject} from "@/api/payfee/project";
import { listCustomInfo } from "@/api/waitress/customInfo";
import { getRoom } from "@/api/property/room";
import { getCommunity } from "@/api/property/community";
export default {
  name: "RuleCost",
  data() {
    return {
      ownerOptions:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      statusOptions: [],

      proOptions:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        roomId: [
          { required: true, message: "房屋不能为空", trigger: "blur" }
        ],
        ownerId: [
          { required: true, message: "客户不能为空", trigger: "blur" }
        ],
        projectId: [
          { required: true, message: "收费类型不能为空", trigger: "blur" }
        ],
        chargeId: [
          { required: true, message: "收费项目不能为空", trigger: "blur" }
        ],
      },
      currentNode:{},
      //收费项目字典
      itemOptions:[],
      //收费类型字典
      projectOptions:[],
      roomColumns:[
        {title:'楼栋',key:'floorName',type:'',isSearch:true},
        {title:'单元',key:'unitName',type:'',isSearch:true},
        {title:'房屋编号',key:'roomNum',type:'',isSearch:true},
        {title:'客户姓名',key:'customName',type:'',isSearch:true},
      ],
    };
  },
  created() {
    this.getDicts("rule_cost_status").then(response => {
      this.statusOptions = response.data;
    });
    listItem({'projectId':'03'}).then(res=>{
      this.itemOptions = res.rows;
    })
    listProject({'projectCode':'03'}).then(res=>{
      this.projectOptions = res.rows;
    })

  },
  methods: {
    show(currentNode) {
      this.reset();
      this.open = true;
      this.title = "添加临时费用单";
      if(currentNode.roomIds){
        getRoom(currentNode.roomIds).then(res=>{
          this.form.roomId = res.data.id;
          this.form.roomName = res.data.roomName;
          this.form.ownerId = res.data.ownerId;
        })
      }
      this.getOwnerList();
      this.getProjectList();
      this.getNowTime();
    },
    getOwnerList(){
      listCustomInfo().then(response => {
        this.ownerOptions =  response.rows;
      })
    },
    getProjectList(){
      listProject({'projectCode':'03'}).then(response => {
        this.proOptions = response.rows;
      })
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.$set(this.form, "receivableTime", defaultDate);
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 收费项目字典翻译
    itemFormat(row, column) {
      let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
      if(index != -1){
        return this.itemOptions[index].chargeName
      }
      return '';
    },
    // 收费类型字典翻译
    projectFormat(row, column) {
      let index = this.projectOptions.findIndex(x=>x.projectId == row.projectId);
      if(index != -1){
        return this.projectOptions[index].projectType
      }
      return '';
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.$emit("cancel")
    },
    // 表单重置
    reset() {
      this.form = {
        costId: null,
        costNo: null,
        roomId: null,
        deptId: null,
        ownerId: null,
        projectId: '03',
        chargeId: null,
        normId: null,
        roomNormId: null,
        receivableTime: null,
        beginTime: null,
        finishTime: null,
        prices: null,
        moneys: null,
        specialMoney: null,
        queenMoney: null,
        receivableMoney: null,
        haveMoney: null,
        costType: null,
        fullReceiptDate: null,
        status: '10001',
        ancestors: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        roomName:null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addRuleCost(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.cancel();
          });
        }
      });
    },
    roomSelect(index,row){
      this.form.roomName=`${row.unitName}-${row.roomNum}`;
      this.form.roomId=row.id;
      this.form.ownerId=row.ownerId;
    },
  }
};
</script>
